<template>
  <div class="app-container">
    <PageSearch :showSearch.sync="showSearch" :getList="getList" :handleQuery="handleQuery" :resetQuery="resetQuery">
      <template #form>
        <el-form :model="queryParams" v-show="showSearch" ref="queryForm" size="small" :inline="true">
          <el-row>
            <el-form-item prop="skuNo">
              <el-input
                v-model="queryParams.skuNo"
                :placeholder="$t('sku编号')"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <!-- 库位 -->
            <el-form-item prop="spNo">
              <el-input
                :placeholder="$t('库位号')"
                v-model="queryParams.spNo"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item prop="sellerName">
              <el-input
                :placeholder="$t('卖家名称')"
                v-model="queryParams.sellerName"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item prop="applyRestrict">
              <el-select
                :placeholder="$t('是否限制')"
                clearable
                @change="handleQuery"
                v-model="queryParams.applyRestrict"
              >
                <el-option :value="1" :label="$t('限制')" />
                <el-option :value="2" :label="$t('不限制')" />
              </el-select>
            </el-form-item>
            <el-form-item prop="skuNameCn">
              <el-input
                v-model="queryParams.skuNameCn"
                :placeholder="$t('中文名')"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item prop="skuNameJp">
              <el-input
                v-model="queryParams.skuNameJp"
                :placeholder="$t('日文名')"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item prop="spNo">
              <treeselect
                size="mini"
                :appendToBody="true"
                v-model="queryParams.classId"
                :options="menuOptions"
                :show-count="true"
                :placeholder="$t('商品分类')"
              />
            </el-form-item>
            <el-form-item label-width="120px" prop="gtNum">
              <el-input
                :placeholder="$t('可用库存大于')"
                v-model="queryParams.gtNum"
                type="number"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label-width="120px" prop="ltNum">
              <el-input
                :placeholder="$t('可用库存小于')"
                v-model="queryParams.ltNum"
                type="number"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item prop="janCode">
              <el-input
                v-model="queryParams.janCode"
                :placeholder="$t('jan编码')"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-row>
          <el-row>
            <el-form-item prop="shopStockFlag">
              <el-select
                :placeholder="$t('店铺库存')"
                clearable
                @change="handleQuery"
                v-model="queryParams.shopStockFlag"
              >
                <el-option :value="1" :label="$t('店铺库存>0')" />
                <el-option :value="2" :label="$t('店铺库存<0')" />
                <el-option :value="3" :label="$t('店铺库存=0')" />
                <el-option :value="4" :label="$t('店铺库存>可用库存')" />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions>
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button
              type="warning"
              plain
              icon="el-icon-download"
              size="mini"
              v-hasPermi="['distribution:skuSeller:exportSkuSeller']"
              @click="handleExport"
            >
              {{ $t('导出') }}
            </el-button>
          </el-col>
        </el-row>
      </template>
      <template #pagination>
        <pagination
          v-show="pageTotal > 0"
          :total="pageTotal"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </template>
    </PageSearch>
    <el-table
      @row-click="(row) => $rowClick(row, clickedRows)"
      :row-class-name="({ row }) => $tableRowClassName(row, clickedRows)"
      :height="calTableHeight()"
      v-loading="loading"
      ref="TableRef"
      :data="tableData"
      row-key="menuId"
    >
      <el-table-column align="center" show-overflow-tooltip width="150" prop="sellerName" :label="$t('卖家名称')" />
      <el-table-column align="center" show-overflow-tooltip prop="skuNo" :label="$t('sku编号')" width="150">
        <template #header="{ column }">
          <div class="sort-item">
            <div @click="resetSortQuery(column)">
              {{ column.label }}
            </div>
            <div class="sort-item-icon">
              <i
                class="el-icon-caret-top"
                @click="setSortQuery(column, 'asc')"
                :style="setSortIconStyle(column, 'asc')"
              />
              <i
                @click="setSortQuery(column, 'desc')"
                :style="setSortIconStyle(column, 'desc')"
                class="el-icon-caret-bottom"
              />
            </div>
          </div>
        </template>
        <template slot-scope="scope">
          <div @click="handleEdit(scope.row)" style="cursor: pointer; color: #1890ff">
            {{ scope.row.skuNo }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="spNo" :label="$t('库位号')" width="150">
        <template #header="{ column }">
          <div class="sort-item">
            <div @click="resetSortQuery(column)">
              {{ column.label }}
            </div>
            <div class="sort-item-icon">
              <i
                class="el-icon-caret-top"
                @click="setSortQuery(column, 'asc')"
                :style="setSortIconStyle(column, 'asc')"
              />
              <i
                @click="setSortQuery(column, 'desc')"
                :style="setSortIconStyle(column, 'desc')"
                class="el-icon-caret-bottom"
              />
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column :label="$t('主图')" prop="imgUrl" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 50px; height: 50px"
            fit="contain"
            :key="Math.random()"
            v-hover="scope.row.imgUrl"
            :src="scope.row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
          />
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="skuNameCn" :label="$t('中文名')">
        <template #header="{ column }">
          <div class="sort-item">
            <div @click="resetSortQuery(column)">
              {{ column.label }}
            </div>
            <div class="sort-item-icon">
              <i
                class="el-icon-caret-top"
                @click="setSortQuery(column, 'asc')"
                :style="setSortIconStyle(column, 'asc')"
              />
              <i
                @click="setSortQuery(column, 'desc')"
                :style="setSortIconStyle(column, 'desc')"
                class="el-icon-caret-bottom"
              />
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" width="150" show-overflow-tooltip prop="skuNameJp" :label="$t('日文名')">
        <template #header="{ column }">
          <div class="sort-item">
            <div @click="resetSortQuery(column)">
              {{ column.label }}
            </div>
            <div class="sort-item-icon">
              <i
                class="el-icon-caret-top"
                @click="setSortQuery(column, 'asc')"
                :style="setSortIconStyle(column, 'asc')"
              />
              <i
                @click="setSortQuery(column, 'desc')"
                :style="setSortIconStyle(column, 'desc')"
                class="el-icon-caret-bottom"
              />
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="allocateStock"
        :label="$t('店铺库存占用')"
        width="110"
      >
        <template slot-scope="{ row }">
          <span
            :style="{
              color: row.allocateStock > row.stock ? 'red' : 'blue',
            }"
            style="cursor: pointer"
            @click="handleStock(row)"
          >
            {{ row.allocateStock }}
          </span>
        </template>
      </el-table-column>
      <!-- 最新申请价格 -->
      <el-table-column align="center" show-overflow-tooltip prop="price" :label="$t('最新申请价格')" width="110">
        <template slot-scope="{ row }">
          <span>{{ (+row.price || 0).toFixed() }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip :label="$t('是否限制')">
        <template slot-scope="scope">
          <div v-if="scope.row.applyRestrict == 1">
            {{ $t('限制') }}
          </div>
          <div v-if="scope.row.applyRestrict == 2">
            {{ $t('不限制') }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="weekSales" :label="$t('周销量')" />
      <el-table-column align="center" show-overflow-tooltip prop="monthSales" :label="$t('月销量')" />
      <el-table-column align="center" show-overflow-tooltip prop="totalSales" :label="$t('总销量')" />
      <el-table-column align="center" show-overflow-tooltip prop="stock" :label="$t('可用库存')">
        <template #header="{ column }">
          <div class="sort-item">
            <div @click="resetSortQuery(column)">
              {{ column.label }}
            </div>
            <div class="sort-item-icon">
              <i
                class="el-icon-caret-top"
                @click="setSortQuery(column, 'asc')"
                :style="setSortIconStyle(column, 'asc')"
              />
              <i
                @click="setSortQuery(column, 'desc')"
                :style="setSortIconStyle(column, 'desc')"
                class="el-icon-caret-bottom"
              />
            </div>
          </div>
        </template>
        <template slot-scope="{ row }">
          <span
            :style="{
              color: 'green',
            }"
            style="cursor: pointer"
            @click="handleAvailableStock(row)"
          >
            {{ row.stock }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="cloudStock" width="110" :label="$t('可申请数量')">
        <template slot-scope="{ row }">
          <span
            :style="{
              color: row.cloudStock > 0 ? 'red' : '',
              cursor: 'pointer',
            }"
            @click="submitFormData(row)"
            v-if="$hasPermission('distribution:skuSellerApply:apply')"
          >
            {{ row.cloudStock }}
          </span>
          <span
            :style="{
              color: row.cloudStock > 0 ? 'red' : '',
            }"
            v-else
          >
            {{ row.cloudStock }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="cloudPrice" :label="$t('云价格')" />

      <el-table-column align="center" show-overflow-tooltip prop="isApplyNum" width="110" :label="$t('申请中数量')" />
      <el-table-column fixed="right" :label="$t('操作')" width="130" align="center">
        <template slot="header">
          <div>
            {{ $t('操作') }}
            <el-tooltip effect="dark" placement="top-start">
              <div slot="content">
                <p>{{ $t('申请限制') }}：</p>
                <p>
                  {{ $t('1.已经申请过的sku没卖完或者没卖超过申请数量一半，禁止继续申请') }}
                </p>
                <p>
                  {{
                    $t(
                      '例如：J-(00000006)申请了20，如果付款数量没超过10个就不能继续申请，付款数量会在销售、提前付款、周期结账时更新。',
                    )
                  }}
                </p>
                <p>
                  {{
                    $t(
                      '2.申请后如果觉得卖不完可以退回库存，可以选择数量，但是一个申请只能退回一次，并且退回数量大于一半会在卖家SKU库存表标记限制',
                    )
                  }}
                </p>
                <p>
                  {{ $t('被标记限制的sku申请时，只能申请月销售数量') }}
                </p>
                <p>
                  {{
                    $t(
                      '例如：J-(00000006)申请了20，如果退回了10个就会被标记限制，限制后如果还想申请，只能申请等于或小于该sku的月销量的数量，或者向管理员提出解除限制',
                    )
                  }}
                </p>
              </div>
              <i style="cursor: pointer" class="el-icon-info"></i>
            </el-tooltip>
          </div>
        </template>
        <template slot-scope="{ row }">
          <!-- <el-popconfirm
            style="margin-right: 15px"
            v-hasPermi="['system:skuSellerApply:closeLimit']"
            :title="$t('手动解除申请限制')"
            @confirm="submitCloseLimit(scope.row)">
            <el-button :disabled="scope.row.applyRestrict !== 1" slot="reference" type="text">
              {{ $t('手动解除申请限制') }}
            </el-button>
          </el-popconfirm> -->
          <!-- <el-button
            type="text"
            v-hasPermi="['distribution:skuSellerApply:apply']"
            @click="submitFormData(scope.row)">
            {{ $t('申请') }}
          </el-button> -->
          <el-dropdown @command="(command) => handleCommand(command, row)">
            <span class="el-dropdown-link"> 更多<i class="el-icon-arrow-down el-icon--right"></i> </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-hasPermi="['distribution:skuSellerApply:apply']" command="apply">
                {{ $t('申请库存') }}
              </el-dropdown-item>
              <el-dropdown-item command="wenan" v-hasPermi="['distribution:skuTempProxyApply:getApplyNumBySkuId']">
                {{ $t('添加文案代做') }}
              </el-dropdown-item>
              <el-dropdown-item command="productionApply" v-hasPermi="['distribution:skuSellerApplyProduce:add']">
                {{ $t('出品申请') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 申请 -->
    <el-dialog
      :visible.sync="editDialogConfig"
      :title="$t('申请数量')"
      top="7vh"
      width="600px"
      destroy-on-close
      :modal="true"
      :close-on-click-modal="false"
      class="articleModal"
    >
      <div>
        <el-form ref="elForm" :model="curentData" :rules="curentDataRuler" size="small" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="id" prop="id">
                <el-input disabled v-model="curentData.id" :placeholder="$t('请输入')" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('sku编号')" prop="skuNo">
                <el-input disabled v-model="curentData.skuNo" :placeholder="$t('请输入')" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('中文名')" prop="skuNameCn">
                <el-input disabled v-model="curentData.skuNameCn" :placeholder="$t('请输入')" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('日文名')" prop="skuNameJp">
                <el-input disabled v-model="curentData.skuNameJp" :placeholder="$t('请输入')" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('价格')" prop="cloudPrice">
                <el-input disabled v-model="curentData.cloudPrice" :placeholder="$t('请输入')" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('供应商名称')" prop="distrName">
                <el-input disabled v-model="curentData.distrName" :placeholder="$t('请输入')" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('更新日期')" prop="updateTime">
                <el-input disabled v-model="curentData.updateTime" :placeholder="$t('请输入')" clearable />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('备注')" prop="remark">
                <el-input disabled v-model="curentData.remark" :placeholder="$t('请输入')" clearable />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item :label="$t('申请数量')" prop="applyNum">
                <el-input v-model.number="curentData.applyNum" :placeholder="$t('请输入')" clearable />
                <!-- <el-input-number
                    style="width: 100%"
                    v-model="curentData.applyNum"
                    controls-position="right"
                    :precision="0"
                    :min="1"
                    :max="curentData.cloudStock" /> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item :label="$t('可申请数量')">
                <el-input disabled v-model="curentData.cloudStock" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="curentData.sellerLevelName">
            <el-col :span="12">
              <el-form-item :label="$t('卖家级别')" style="color: red">
                {{ `${curentData.sellerLevelName}  (自动审批比例： ${curentData.sellerLevelRate}%)` }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">{{ $t('确定') }}</el-button>
        <el-button @click="cancel">{{ $t('取消') }}</el-button>
      </div>
    </el-dialog>
    <!-- 可用库存弹框 -->
    <el-dialog
      :title="$t('可用库存')"
      :visible.sync="dialogVisible"
      top="7vh"
      width="90%"
      class="availableStock"
      :before-close="handleClose"
    >
      <div slot="title" class="headerNameFather">
        <div class="headerName">
          <div>sku:{{ curentDataStock.skuNo }}</div>
          <div>{{ $t('可用库存') }}:{{ curentDataStock.stock }}</div>
        </div>
      </div>
      <div class="dialogTabel">
        <div>
          <div class="aboutSku">关联店铺sku</div>
        </div>
        <el-table
          :height="calTableHeight() - 150"
          show-summary
          :summary-method="handleSum"
          ref="TableRef"
          border
          :data="skuDistributorSellerApplyList"
        >
          <el-table-column show-overflow-tooltip type="selection" width="55" align="center" />
          <el-table-column show-overflow-tooltip width="150" :label="$t('平台/店铺')" align="center" prop="shopType">
            <template slot-scope="{ row }">
              <div>{{ handleType(row.shopType) }}</div>
              <div>{{ row.shopName }}</div>
            </template>
          </el-table-column>
          <el-table-column width="150" show-overflow-tooltip :label="$t('库存/店铺sku')" align="center" prop="shopName">
            <template slot-scope="{ row }">
              <div style="cursor: pointer; color: #1890ff" @click="handleShopStock(row)">
                {{ row.stock || $t('未分配') }}
              </div>
              <!-- <div>{{ row.shopSku }}</div> -->
              <div v-if="row.shopSkuType == 2" style="color: red; cursor: pointer">
                {{ row.shopSku }}
              </div>
              <div v-else>
                {{ row.shopSku }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            width="150"
            show-overflow-tooltip
            :label="$t('类型/sku、组合')"
            align="center"
            prop="shopSku"
          >
            <template slot-scope="{ row }">
              <!-- 店铺SKU类型 1-单品 2-组合 -->
              <div v-if="row.shopSkuType == 1">
                <div style="color: green">
                  {{ $t('单品') }}
                </div>
                <div @click="handleEdit(row)" style="cursor: pointer; color: #1890ff">{{ row.skuNo }}</div>
              </div>
              <div v-if="row.shopSkuType == 2">
                <div style="color: red">
                  {{ $t('组合') }}
                </div>
                <div @click="handleCombinationInfo(row)" style="cursor: pointer; color: #1890ff">
                  {{ row.skuNo }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('图片')" align="center" prop="imgUrl">
            <template slot-scope="{ row }">
              <el-image
                :preview-src-list="[row.imgUrl]"
                style="width: 40px; height: 40px"
                :src="row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
              />
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            width="150"
            :label="$t('店铺库存管理')"
            align="center"
            prop="isStockManage"
          >
            <template #header>
              <el-tooltip placement="top">
                <i class="el-icon-question" style="cursor: pointer; color: #409eff"></i>
                <template #content>
                  <p>开启：开启时才会对此店铺sku推荐库存</p>
                  <p>关闭：关闭时会忽略此店铺sku的销量，并且不会推荐此店铺sku推荐库存</p>
                </template>
              </el-tooltip>
              <span>{{ $t('店铺库存管理') }}</span>
            </template>
            <template slot-scope="{ row }">
              <el-select
                size="small"
                @change="handleUpdateSetting($event, 'isStockManage', row)"
                v-model="row.isStockManage"
                :disabled="!$hasPermission('distribution:skuShopStock:edit')"
              >
                <el-option :label="$t('关闭')" :value="0" />
                <el-option :label="$t('开启')" :value="1" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            :label="$t('推荐库存')"
            width="140"
            align="center"
            prop="recommendStock"
          >
            <template slot-scope="{ row }">
              <div style="cursor: pointer; color: #1890ff" @click="handleRecommendStock(row)">
                <span v-if="row.recommendStock == null">{{ $t('未设置') }} </span>
                <span v-else> {{ row.recommendStock }}</span>
              </div>
              <div style="font-size: 12px">{{ row.recommendStockUpdateTime }}</div>
            </template>
          </el-table-column>

          <el-table-column
            width="120"
            show-overflow-tooltip
            :label="$t('锁定库存推荐')"
            align="center"
            prop="isIgnoreRecommendStock"
          >
            <template #header>
              <el-tooltip placement="top">
                <i class="el-icon-question" style="cursor: pointer; color: #409eff"></i>
                <template #content>
                  <p>锁定：锁定店铺库存，不作推荐</p>
                  <p>推荐：优先扣除锁定的库存后按销量推荐</p>
                </template>
              </el-tooltip>
              <span>{{ $t('锁定库存推荐') }}</span>
            </template>
            <template slot-scope="{ row }">
              <el-select
                size="small"
                @change="handleUpdateSetting($event, 'isIgnoreRecommendStock', row)"
                v-model="row.isIgnoreRecommendStock"
                :disabled="!$hasPermission('distribution:skuShopStock:edit')"
              >
                <el-option :label="$t('锁定')" :value="0" />
                <el-option :label="$t('推荐')" :value="1" />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip :label="$t('店铺最大库存')" align="center" prop="recommendStock">
            <template slot-scope="{ row }">
              <div style="cursor: pointer; color: #1890ff" @click="handleShopMaxStock(row)">
                {{ row.maxStock || $t('未设置') }}
              </div>
            </template>
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            :label="$t('周销量/月销量/总销量')"
            align="center"
            prop="recommendStock"
          >
            <template slot-scope="{ row }">
              <div>{{ row.weekSales }}/{{ row.monthSales }}/{{ row.totalSales }}</div>
              <div style="font-size: 12px">{{ row.saleUpdateTime }}</div>
            </template>
          </el-table-column>

          <el-table-column show-overflow-tooltip width="150" :label="$t('url/备注')" align="center" prop="url">
            <template slot-scope="{ row }">
              <div>
                <el-link :href="row.url" target="_blank">{{ row.url }}</el-link>
              </div>
              <div>
                {{ $t('备注') }}: <span style="font-size: 12px">{{ row.remark }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" show-overflow-tooltip prop="shopSkuType" :label="$t('组合数量')" width="150">
            <template #default="{ row }">
              <div>{{ row.combinationSkuNum }}</div>
            </template>
          </el-table-column>
          <el-table-column align="center" show-overflow-tooltip prop="allocateStock" :label="$t('总占用数量')" />

          <el-table-column align="center" show-overflow-tooltip prop="stock" :label="$t('可用库存')" />
        </el-table>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">{{ $t('关闭') }}</el-button>
      </div>
    </el-dialog>
    <!-- 修改可用库存 -->
    <!-- 可用库存弹框 -->
    <el-dialog :title="$t('可用库存')" :visible.sync="handleEditAboutSkuShow" top="7vh" width="400px">
      <el-form ref="form" :model="dsSkuShopStockUpdateDTO" label-width="120px" size="mini">
        <el-form-item :label="$t('可用库存')">
          <el-input v-model="dsSkuShopStockUpdateDTO.stock"></el-input>
        </el-form-item>
        <el-form-item :label="$t('自动分配比列%')" style="position: relative">
          <el-input oninput="value=value.replace(/[^\d.]/g, '')" v-model="dsSkuShopStockUpdateDTO.stockRate"></el-input>
          <span style="color: #999; position: absolute; right: 20px">%</span>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibleClose">{{ $t('关闭') }}</el-button>
        <el-button @click="submitEditAboutSku" type="primary">{{ $t('确定') }}</el-button>
      </div>
    </el-dialog>

    <!-- 组合 sku列表 -->
    <el-dialog :visible.sync="combinationInfo.show" width="80%" append-to-body>
      <template #title>
        <div style="text-align: center; color: #1890ff; cursor: pointer" @click="handleCompositeTemplate">
          {{ $t('组合模板') }}
        </div>
      </template>
      <el-table ref="TableRef" :data="combinationInfo.formData">
        <!-- sku -->
        <el-table-column align="center" show-overflow-tooltip prop="skuNo" :label="$t('单品SKU')">
          <template slot-scope="{ row }">
            {{ row.skuNo }}
          </template>
        </el-table-column>
        <!-- 图片 -->
        <el-table-column prop="imgUrl" :label="$t('图片')" align="center">
          <template slot-scope="{ row }">
            <el-image
              fit="contain"
              :key="Math.random()"
              v-hover="row.imgUrl"
              style="width: 50px; height: 50px"
              :src="row.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
            />
          </template>
        </el-table-column>
        <!-- 名字 -->
        <el-table-column show-overflow-tooltip width="200" prop="skuNameCn" :label="$t('中文名')" align="center" />
        <el-table-column show-overflow-tooltip width="200" prop="skuNameJp" :label="$t('日文名')" align="center" />

        <!-- 组合数量 -->
        <el-table-column :label="$t('组合数量')" prop="combinationNum" align="center"> </el-table-column>
        <!-- 规格 -->
        <el-table-column show-overflow-tooltip prop="specificatio" :label="$t('规格')" align="center" />

        <!-- 可售数量 -->
        <el-table-column show-overflow-tooltip prop="saleNum" :label="$t('可售数量')" align="center" />
      </el-table>
    </el-dialog>
    <!-- 店铺库存 -->
    <ShopStock
      :show.sync="shopStock.show"
      :formData="shopStock.formData"
      @getList="
        () => {
          getListSkuStock()
          getList()
        }
      "
    />
    <!-- 推荐库存 -->
    <RecommendStock
      :show.sync="recommendStock.show"
      :formData="recommendStock.formData"
      @getList="
        () => {
          getListSkuStock()
          getList()
        }
      "
    />
    <!-- 店铺最大库存 -->
    <ShopMaxStock
      :show.sync="shopMaxStock.show"
      :formData="shopMaxStock.formData"
      @getList="
        () => {
          getListSkuStock()
          getList()
        }
      "
    />

    <!-- sku详情/修改 -->
    <Skucontmoduler @relaod="relaod" ref="Skucontmoduler"></Skucontmoduler>

    <AvailableStock :show.sync="availableStock.show" @getList="getList" :formData="availableStock.formData" />
    <!-- 组合模板 -->
    <CompositeTemplate
      :formData="compositeTemplate.formData"
      :show.sync="compositeTemplate.show"
      :combinationId="compositeTemplate.formData.combinationId"
      @success="getList"
    />
    <!-- 添加文案代做 -->
    <Wenan :show.sync="wenan.show" @getList="getList" :formData="wenan.formData" />
    <!-- 出品申请 -->
    <ProductionApply :show.sync="productionApply.show" @getList="getList" :formData="productionApply.formData" />
  </div>
</template>

<script>
import CompositeTemplate from '@/components/CompositeTemplate'
import {
  allocateStock,
  closeLimit,
  getSkuSellerList,
  shopSkuStockList,
  skuDistributorSellerApply,
  updateSkuShopStock,
} from '@/api/distribution/sku/SellerSku'

import { getCombinationSkuByCombinationId, updateSkuShopSetting } from '@/api/distribution/sku/storeSkuList'
import handleTableSum from '@/utils/handleSum'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import AvailableStock from './components/availableStock.vue'
import ProductionApply from './components/productionApply.vue'
import Wenan from './components/wenan.vue'
import { checkPermi } from '@/utils/permission'
import ShopStock from './components/shopStock.vue'
import ShopMaxStock from './components/shopMaxStock.vue'
import RecommendStock from './components/recommendStock.vue'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'SellerSku',

  components: {
    ShopMaxStock,
    RecommendStock,
    ShopStock,
    Treeselect,
    Wenan,
    ProductionApply,
    CompositeTemplate,
    AvailableStock,
  },
  data() {
    return {
      /**推荐库存 */
      recommendStock: {
        show: false,
        formData: {},
      },
      /**店铺最大库存 */
      shopMaxStock: {
        show: false,
        formData: {},
      },
      /**店铺库存 */
      shopStock: {
        show: false,
        formData: {},
      },
      shop_type_list: [],
      /**组合sku列表 */
      combinationInfo: {
        show: false,
        formData: {},
      },
      /**组合模板 */
      compositeTemplate: {
        show: false,
        formData: {},
      },
      /**可用库存 */
      availableStock: {
        show: false,
        formData: {},
      },
      /**添加文案代做 */
      wenan: {
        show: false,
        formData: {},
      },
      /**出品申请 */
      productionApply: {
        show: false,
        formData: {},
      },
      /**修改库存 */
      dsSkuShopStockUpdateDTO: {
        id: '',
        stock: 0,
        stockRate: 0,
      },
      /**修改可用库存和自动分配比例 */
      handleEditAboutSkuShow: false,
      /**店铺sku库存分配列表 */
      skuDistributorSellerApplyList: [],
      /**可用库存数据 */
      curentDataStock: {},
      /**可用库存弹框 */
      dialogVisible: false,
      /**点击的表格项 */
      clickedRows: [],
      /**商品分类菜单树选项 */
      menuOptions: [],
      showSearch: false,
      curentData: {
        label: '',
        skuId: '',
        skuNo: '',
        imgUr: '',
        skuNameCn: '',
        skuNameJp: '',
        cloudStock: '',
        cloudPrice: '',
        distrName: '',
        updateTime: '',
        remark: '',
      },
      editDialogConfig: false,
      tableData: [],
      /**数据总条数 */
      pageTotal: 0,
      loading: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        value2: 1,
      },
      curentDataRuler: {
        applyNum: [],
      },
      /**平台类型数组 */
      platformTypeOptions: ['亚马逊 ', '乐天', '雅虎拍卖', '雅虎商城', '煤炉(法人)', '沃尔玛', '煤炉(个人)'],
    }
  },
  watch: {
    'queryParams.pageNum': function (val) {
      this.clickedRows = []
    },
  },
  created() {
    this.getList()
    this.$getSkuClassList().then((res) => {
      this.menuOptions = res.menuOptions
    })
    this.useDict('shop_type').then(({ shop_type }) => {
      this.shop_type_list = shop_type.map((item) => {
        return {
          ...item,
          dictValue: +item.dictValue,
        }
      })
    })
  },
  methods: {
    handleUpdateSetting(value, key, row) {
      const data = {
        [key]: value,
        id: row.id,
      }
      updateSkuShopSetting(data).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          this.$message({ type: 'success', message: msg })
          this.getListSkuStock()
          this.getList()
        }
      })
    },
    handleShopMaxStock(row) {
      const flag = checkPermi(['distribution:skuShopStock:edit'])
      if (!flag) return
      this.shopMaxStock.formData = row
      this.shopMaxStock.show = true
    },
    handleRecommendStock(row) {
      const flag = checkPermi(['distribution:skuShopStock:edit'])
      if (!flag) return
      this.recommendStock.formData = row
      this.recommendStock.show = true
    },
    handleShopStock(row) {
      const flag = checkPermi(['distribution:skuShopStock:edit'])
      if (!flag) return
      this.shopStock.formData = row
      this.shopStock.show = true
    },
    handleType(type) {
      const index = this.shop_type_list.findIndex((i) => i.dictValue == type)
      return this.shop_type_list[index]?.dictLabel
    },
    handleCompositeTemplate() {
      this.compositeTemplate.show = true
    },
    handleCombinationInfo(row) {
      // 组合模板信息
      this.compositeTemplate.formData = row
      getCombinationSkuByCombinationId(row.skuId).then((res) => {
        const { code, data } = res
        this.combinationInfo.show = true
        this.combinationInfo.formData = data
      })
    },
    handleCommand(command, row) {
      console.log(`command ==>`, command)
      switch (command) {
        case 'apply':
          this.submitFormData(row)
          break
        case 'wenan' /**文案代做 */:
          this.wenan.formData = row
          this.wenan.show = true
          break
        case 'productionApply' /**文案代做 */:
          this.productionApply.formData = row
          this.productionApply.show = true
          break

        default:
          break
      }
    },
    handleSum(param) {
      /**
       * 需要进行统计的字段
       */
      const data = handleTableSum(param, ['allocateStock'], '合计')

      return data
    },
    /**关闭修改 */
    dialogVisibleClose() {
      this.handleEditAboutSkuShow = false
    },
    /**提交修改库存的表单 */
    submitEditAboutSku() {
      updateSkuShopStock(this.dsSkuShopStockUpdateDTO).then((res) => {
        if (res.code == 200) {
          this.dsSkuShopStockUpdateDTO = {
            id: '',
            stock: 0,
            stockRate: 0,
          }
          this.$message.success('修改成功')
          this.getListSkuStock()
          this.handleEditAboutSkuShow = false
        }
      })
    },
    /**修改可用库存和自动分配比列 */
    handleEditAboutSku(row) {
      this.dsSkuShopStockUpdateDTO = JSON.parse(JSON.stringify(row))
      this.handleEditAboutSkuShow = true
    },
    /**平均，按比例自动分配库存 */
    prorateDistribution(type) {
      this.$confirm(this.$t('确认分配库存?'), this.$t('提示'), {
        type: 'warning',
      }).then(() => {
        allocateStock({
          id: this.curentDataStock.id,
          type,
        }).then((res) => {
          this.$message.success('操作成功')
          this.getListSkuStock()
        })
      })
    },
    /**可用库存弹框关闭 */
    handleClose() {
      this.dialogVisible = false
      this.getList()
    },
    handleStock(row) {
      this.dialogVisible = true
      this.curentDataStock = row
      this.getListSkuStock()
    },
    /**可用库存弹框打开 */
    handleAvailableStock(row) {
      this.availableStock.formData = row
      this.availableStock.show = true
    },
    /**获取分配列表 */
    getListSkuStock() {
      shopSkuStockList({ id: this.curentDataStock.id }).then((res) => {
        this.skuDistributorSellerApplyList = res.data
        this.skuDistributorSellerApplyList.forEach((item, index) => {
          if (item.stockRate) {
            item.stockRate = item.stockRate?.split('.')[0]
          }
        })
      })
    },
    handleExport() {
      this.download(
        'distribution/skuSeller/exportSkuSeller',
        {
          ...this.queryParams,
        },
        `exportSkuSellerList_${new Date().getTime()}.xlsx`,
      )
    },
    relaod() {
      this.getList()
    },
    handleEdit(row) {
      this.$refs.Skucontmoduler.setSkuInfo(row)
      this.$refs.Skucontmoduler.checkNumber('basicInformationSeller')
    },
    submitCloseLimit(value) {
      closeLimit({
        id: value.id,
      }).then((res) => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: res.msg,
          })
        }
        this.getList()
      })
    },

    // 取消申请
    cancel() {
      this.editDialogConfig = !this.editDialogConfig
    },
    // 提交申请
    submitForm() {
      this.$refs.elForm.validate((valid) => {
        if (valid) {
          this.curentData.applyNum = this.curentData.applyNum
          this.curentData.applyPrice = this.curentData.cloudPrice
          this.curentData.applyDistrId = this.curentData.distrId
          if (this.curentData.applyNum == 0) {
            return this.$message.error('申请数量应大于0')
          }
          skuDistributorSellerApply(this.curentData).then((res) => {
            if (res.code === 200) {
              this.$message({ type: 'success', message: res.msg })

              this.editDialogConfig = !this.editDialogConfig
              this.getList()
            }
          })
        }
      })
    },
    // 展示申请
    submitFormData(row) {
      const data = JSON.parse(JSON.stringify(row))
      this.curentDataRuler.applyNum = [
        {
          type: 'number',
          min: 0,
          max: data.cloudStock,
          message: `请输入0-${data.cloudStock}数量`,
          trigger: 'blur',
        },
        {
          required: true,
          message: this.$t('请输入'),
          trigger: 'blur',
        },
      ]
      this.curentData = data
      this.editDialogConfig = !this.editDialogConfig
    },
    /** 查询菜单列表 */
    getList() {
      this.loading = true
      getSkuSellerList(this.queryParams).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.value1 = null
      Object.keys(this.queryParams).forEach((key) => {
        this.queryParams[key] = null
      })
      this.queryParams.pageNum = 1
      this.queryParams.pageSize = 10

      this.getList()
    },

    /** 展开/折叠操作 */
    toggleExpandAll() {
      this.refreshTable = false
      this.isExpandAll = !this.isExpandAll
      this.$nextTick(() => {
        this.refreshTable = true
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.availableStock {
  font-size: 18px;
  ::v-deep .el-dialog__header {
    padding: 14px 0 !important;
    border-bottom: 1px solid #e6e6e6;
  }
  .headerNameFather {
    .headerName {
      padding: 0 30px;
      width: 60%;
      display: flex;
      justify-content: space-between;
    }
  }

  .dialogTabel {
    color: #000000;
    & > :first-child {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
      .aboutSku {
        font-size: 16px;
        font-weight: bold;
      }
    }
  }
}
.goods {
  &-img {
    &-box {
      position: relative;
    }

    &-mini {
      height: 50px;
      border-radius: 3px;

      &:hover {
        & + .goods-img-big {
          display: block;
        }
      }
    }

    &-big {
      // display: none;
      position: absolute;
      z-index: 100;
      top: -180px;
      left: 0;
      transform: translate(0, 70px);
      width: 200px;
      height: 200px;
      border-radius: 3px;
    }
  }
}

.bigImg {
  border-radius: 3px;
  z-index: 10;
  position: fixed;
  width: 200px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
